<template>
  <view class="practice">
    <statusBar></statusBar>
    <logo></logo>
    <view style="height:10px;background-color: #f2f2f2;"></view>
    <view class="uni-padding-wrap uni-common-mt">
      <uni-segmented-control :current="current" :values="items" v-on:clickItem="onClickItem" :styleType="styleType" :activeColor="activeColor"></uni-segmented-control>
    </view>
    <view style="height:10px;background-color: #f2f2f2;"></view>
    <view class="content">
      <view v-show="current === 0">
        
        <view class="tiku">
          <view>
            <button :class="{active: tikuAcviteIndex == index}" @click="choiceTiku(index,item)" v-for="(item,index) in tikuList" :key="index">{{item.QueBankName}}</button>
          </view>
        </view>
        <view style="height:10px;background-color: #f2f2f2;"></view>

        
        <view v-for="(item, index) in chapterList" :key="index">
          <view class="subtitle" @click="showSub(index)">
            <image v-if="activeIndex === index" src="../../../static/img/practice/zhk_icon.png"></image>
            <image v-else src="../../../static/img/practice/jia_icon.png"></image>
            <image src="" mode=""></image>
            {{ item.SubName }}
          </view>
          <view class="subname" v-show="activeIndex === index">
            <view class="subinfo" v-for="(items,indexs) in item.SysChapterViewModels" :key="indexs">
              {{ items.ChapterName }}
              <button @click="goPractice(items.ChapterId)" type="mini-btn">开始答题</button>
            </view>
          </view>
        </view>
        <view style="height:10px;background-color: #f2f2f2;"></view>
      </view>
	  <view v-show="current === 1">
		  <!-- 定位搜索 -->
		  <view class="search_dw">
		  	<view class="ser_dw" @click="openCity">
		  		<img src="../../../static/img/practice/dingwei.png" style="width: 15px;height: 19px;">
				<text>{{city}}</text>
				<img src="../../../static/img/practice/jiantou.png" style="width: 10px;height: 5px;">
		  	</view>
			<view class="search_block">
				<view class="search">
					<view class="search-ico-wapper">
						<image src="../../../static/img/practice/sousuo.png" class="search-ico" mode=""></image>
					 </view>
					 <input type="text" value="" placeholder="搜索景点" class="search-text" maxlength="10"/>		
				</view>
				<text class="search_btn">搜索</text>
			</view>
		  </view>
		  <!-- 列表 -->
	  	<view class="jd_list" @click="goExplain">
	  		<view class="jd_top">
	  			<text  class="jd_name">云龙湖旅游景区</text>
	  			<text>5A级景区</text>
	  		</view>
	  		<view>
	  			<text>徐州市泉山区湖南路</text>
	  		</view>	
	  	</view>
		<!-- 选择城市 -->
		<uni-popup :show="isCity" position="bottom" mode="fixed" msg="选择城市" @hidePopup="closeCity">
		    <semp-city @confirm="onCityClick" platform="tb">
				<view class="location">
					<text>定位城市</text>
					<button style="width: 90px;" type="primary">{{city}}</button>
				</view>
			</semp-city>
		</uni-popup>
	  </view>
      <view v-show="current === 2">
        <view class="paper" v-for="(item, index) in yatiList" :key="index">
          <view class="paper-left"><image src="../../../static/img/practice/yati.png"></image></view>
          <view class="paper-center">
            <view class="paper-title">{{ item.PaperName }}</view>
            <view class="paper-info">{{ item.StartTime }}-{{ item.EndTime }}</view>
          </view>
          <view class="paper-right"><button @click="goExam(item.PaperId)" type="default">开始答题</button></view>
        </view>
      </view>
      <view v-show="current === 3">
        <view class="paper" v-for="(item, index) in moniList" :key="index">
          <view class="paper-left"><image src="../../../static/img/practice/yati.png"></image></view>
          <view class="paper-center">
            <view class="paper-title">{{ item.PaperName }}</view>
            <view class="paper-info">{{ item.StartTime }}-{{ item.EndTime }}</view>
          </view>
          <view class="paper-right"><button @click="goExam(item.PaperId)" type="default">开始答题</button></view>
        </view>
      </view>
    </view>

    <uni-popup :show="type === 'middle'" position="middle" mode="fixed" :msg="msg" @hidePopup="togglePopup('')"></uni-popup>
  </view>
</template>

<script>
import statusBar from "@/components/status-bar.vue"
import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
import logo from '../../../components/logo.vue';
import sempCity from "@/components/semp-city/semp-city.vue"
export default {
  components: {
    logo,
    uniSegmentedControl,
    statusBar,
	sempCity
  },
  data() {
    return {
      activeIndex: -1,
      type: '',
      items: ['章节练习','景点讲解', '终极押题', '全真模拟'],
      current: 0,
      styleType: 'text',
      activeColor: '#27B28B',
      chapterList: [],
      yatiList: [],
      moniList: [],
      tikuList: [],
      tikuAcviteIndex: 0,
	  isCity: false,
	  city: '' 
    };
  },
  onLoad: function (option) { 
      if(uni.getStorageSync('token') == null || uni.getStorageSync('token') == undefined || uni.getStorageSync('token') == ''){
        uni.reLaunch({
        	url: '../../login/login'
        })
      }else{
        try {
          var types = uni.getStorageSync('practivetype');
          if (types == 'Qzmn') {
            this.current = 3;
          } else if (types == 'Zjyt') {
            this.current = 2;
          } else if(types == 'Jdjj'){
            this.current = 1;
          } else {
			this.current = 0;  
		  }
          uni.setStorageSync('practivetype', 'Zjlx');
        } catch (e) {
          1500
        }
        this.getAllQuesBank();
        // this.getZJYTPaper();
        // this.getQZMNPaper();
      }
  },
  watch:{
    $route(){
      
    }
  },
  created() {
    if(uni.getStorageSync('token') == null || uni.getStorageSync('token') == undefined || uni.getStorageSync('token') == ''){
        uni.reLaunch({
        	url: '../../login/login'
        })
      }else{
		 this.getLocation().then((res) => {
			 var arr = res.split('市')[0]
			 this.city = arr
		 })
        // this.getZJYTPaper();
        // this.getQZMNPaper();
        this.getAllQuesBank();
      }
  },
  methods: {
    choiceTiku(index,item){
      this.tikuAcviteIndex = index;
      this.getChapterByQueBankId(item.QueBankId);
    },
    getAllQuesBank(){
      uni.request({
        header: {
          'Content-Type': 'application/json',
          Authorization: uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/Student/Practice/GetAllQuesBank',
        data: {},
        success: res => {
          if (res.data.state == 'success') {
            this.tikuList = res.data.data;
            this.getChapterByQueBankId(this.tikuList[0].QueBankId);
          } else {
            this.msg = '加载章节列表错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    getChapterByQueBankId(id){
      uni.request({
        header: {
          'Content-Type': 'application/json',
          Authorization: uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/Student/Practice/GetChapterByQueBankId',
        data: {
          bankId: id
        },
        success: res => {
          if (res.data.state == 'success') {
            this.chapterList = res.data.data;
          } else {
            this.msg = '加载章节列表错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    getZJYTPaper: function() {
      uni.request({
        header: {
          'Content-Type': 'application/json',
          Authorization: uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/Student/Practice/GetZJYTPaper',
        data: {},
        success: res => {
          if (res.data.state == 'success') {
            this.yatiList = res.data.data;
          } else {
            this.msg = '加载终极押题列表错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    getQZMNPaper: function() {
      uni.request({
        header: {
          'Content-Type': 'application/json',
          Authorization: uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/Student/Practice/GetQZMNPaper',
        data: {},
        success: res => {
          if (res.data.state == 'success') {
            this.moniList = res.data.data;
            uni.hideLoading();
          } else {
            this.msg = '加载全真模拟列表错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    goPractice: function(chapterid) {
      uni.navigateTo({
        url: '../../practice/onlinepractice?id=' + chapterid + ''
      });
    },
    goExam: function(paperid) {
      uni.navigateTo({
        url: '../../exam/exam?type=practice&id=' + paperid + ''
      });
    },
	goExplain: function() {
		uni.navigateTo({
		  url: '../../explain/explain'
		});
	},
	getLocation: function(){
		return new Promise(function (resolve, reject) {
			uni.getLocation({
			    type: 'wgs84',
				geocode: true,
			    success: function (res) {
					resolve(res.address.city)
			    }
			});  
		})
		
	},
    onClickItem(index) {
      if (this.current !== index) {
        this.current = index;
		if(index == 1){
			
		}
		else if(index == 2){
			this.getZJYTPaper();
		}
		else if(index == 3){
			this.getQZMNPaper();
		}
      }
	  console.log(index);
    },
    showSub(index) {
      if (index == this.activeIndex) {
        this.activeIndex = -1;
      } else {
        this.activeIndex = index;
      }
    },
	openCity(){
		this.isCity = true
	},
	closeCity(){		
	    this.isCity = false
	},
	onCityClick(e){
		console.log(e)
		var arr = e.city.label
		this.city = arr.split('市')[0];
		this.closeCity()
	}
  }
};
</script>

<style scoped>
.practice {
  background-color: #f2f2f2;
}
.line {
  height: 15upx;
  background-color: #f2f2f2;
}
.wline {
  height: 50upx;
}

.uni-padding-wrap {
  background-color: #fff;
}
.wx-padding-wrap {
  background-color: #fff;
}

.practice .segmented-control {
  width: 100% !important;
}

.practice wx-view .segmented-control-item {
  line-height: 40px !important;
}

.practice wx-view .segmented-control {
  width: 100% !important;
}

.segmented-control-item {
  line-height: 40px !important;
}

.content {
  background-color: #fff;
}
.subtitle {
  height: 80upx;
  color: #333333;
  line-height: 80upx;
  font-size: 28upx;
  text-indent: 72upx;
  position: relative;
  width: 100%;
  border-bottom: 1upx solid #dddddd;
}
.subtitle:last-child {
  border-bottom: none !important;
}
.subtitle image {
  position: absolute;
  width: 30upx;
  height: 30upx;
  top: 27upx;
  left: 27upx;
}
.subinfo {
  position: relative;
  height: 80upx;
  color: #666666;
  line-height: 80upx;
  font-size: 24upx;
  text-indent: 100upx;
  position: relative;
  width: 100%;
  border-bottom: 1upx solid #dddddd;
}
.subinfo button {
  position: absolute;
  top: 17upx;
  right: 25upx;
  width: 120upx;
  height: 48upx;
  line-height: 48upx;
  background-color: #f2f2f2;
  border-radius: 4px;
  text-indent: 0;
  font-size: 24upx;
  color: #666666;
  padding: 0;
}

.paper {
  width: 100%;
  height: 120upx;
  border-bottom: 1upx solid #dddddd;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.paper-left {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100upx;
}
.paper-left image {
  width: 60upx;
  height: 60upx;
  margin: 0 20upx;
}
.paper-center {
  width: 550upx;
}

.paper-right {
  width: 150upx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.paper-right button {
  width: 120upx;
  height: 48upx;
  margin: 0 20upx;
  line-height: 48upx;
  background-color: #f2f2f2;
  border-radius: 4px;
  border: none;
  font-size: 24upx;
  color: #666666;
  padding: 0upx;
}
.paper-title {
  font-size: 28upx;
  line-height: 28upx;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #333333;
  padding-top: 28upx;
  padding-bottom: 15upx;
}
.paper-info {
  font-size: 20upx;
  line-height: 20upx;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #999999;
}


.tiku{
  height: 45upx;
  width: 750upx;
  padding: 10px 10px 10px 10px;
  overflow-x: scroll;
}
.tiku::-webkit-scrollbar {
    display: none;
}
.tiku view{
  white-space:nowrap;
}
.tiku button{
  display: inline-block;
  margin-right: 10px;
  border: none;
  padding: 0upx 15upx;
  height: 45upx;
  line-height: 45upx;
  font-size: 14px;
  border-radius: 50px;
  background-color: #F3F3F3;
  border: 1px solid #F3F3F3;
}
.tiku button:last-child{
  margin-right: 30px;
}
.tiku button.active{
  color: #A0DDCC;
  border: 1px solid #A0DDCC;
  background-color: #ffffff;
}

.tiku button:after{
  content: ''!important;
  border: none;
}
/* 景点讲解 1.1.2 */
.jd_list{
	padding: 13px 17px;
}
.jd_top{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.jd_list text{
	font-size: 12px;
	color:rgba(153,153,153,1);
}
.jd_top .jd_name{
	font-size: 15px;
	color:rgba(51,51,51,1);
}
.content >>> .uni-mask{
	z-index: 999;
	top: 0 !important;
	bottom: 0 !important;
}
.content >>> .uni-popup-bottom{
	position: fixed !important;;
	bottom: 0 !important;;
}
.search_dw{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 17px;
}
.ser_dw{
	display: flex;
	align-items: center;
}
.ser_dw text{
	font-size:15px;
	color:rgba(102,102,102,1);
	margin: 0 5px;
}
.search{
	flex: 1;
	display: flex;
	/* border: 1px solid red; */
}
.search-ico, .search-ico-1{
    width: 30upx;
    height: 30upx;
}
.search-text{
    font-size: 11px;
    height: 60upx;
}
.search{
    display: flex;
	flex-direction: row;
    position: relative;
	background:rgba(242,242,242,1);
	margin: 0 10px;
	border-radius:18px;
}
.search-ico-wapper{
    display: flex;
    flex-direction:column;
    justify-content: center;
    padding: 0upx 10upx 0upx 20upx;
}
.search_block{
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.search_btn{
	font-size: 13px;
	color:rgba(153,153,153,1);
}
.location{
	display: flex;
	align-items: center;
	padding: 0px 15px;
	margin-bottom: 20px;
}
.location text{
	font-size:13px;
	color:rgba(102,102,102,1);
}
.location button{
	width:90px;
	height:34px;
	background:rgba(39,178,139,1);
	border-radius:5px;
	font-size: 14px;
	margin-left: 10px;
}
</style>
